<template>
    <view
        class="TUI-message-input-container"
        :style="{
            transform: `translateY(${transFormHeight}px)`,
        }"
        bubble="true"
        ref="inputBox"
    >
	<!--
	<view @tap="onhadToBottom" class="new-position" v-if="newPosition">
		<text class="new-position-text">回到最新位置</text>
	</view>
	-->
		<!--
        <view v-if="isGroup" :scroll-x="true" :scroll-y="false" :show-scrollbar="false"  class="controls d-flex d-r">
            <view class="control d-flex d-r a-center j-center" @tap="goOverview">
                <image class="icon" src="/static/im/zl.png" mode=""/>
                <text class="text">总览</text>
            </view>
            <view class="control d-flex d-r a-center j-center" @tap="goClockin">
                <image class="icon" src="/static/im/dk.png" mode="" />
                <text class="text">打卡</text>
            </view>

            <view
                class="control d-flex d-r a-center j-center"
                @tap="goGroupProgramme"
            >
                <image class="icon" src="/static/im/tj.png" mode="" />
                <text class="text">方案</text>
            </view>
            <view
                class="control d-flex d-r a-center j-center"
                @tap="goRankList"
            >
                <image class="icon" src="/static/im/ph.png" mode="" />
                <text class="text">排行</text>
            </view>
        </view>
		-->
        <view class="TUI-message-input" ref="textarea_box">
            <view class="audio_icon_box">
                <image
                    class="TUI-icon"
                    :class="{ show: !isAudio }"
                    @tap="handleSwitchAudio"
                    src="/static/im/audio.png"
                ></image>
                <image
                    class="TUI-icon"
                    :class="{ show: isAudio }"
                    @tap="handleSwitchAudio"
                    src="/static/im/keyboard.png"
                ></image>
            </view>

            <view
                class="center_box"
                bubble="true"
                :class="{ active: inputFocusStatu && inputText.trimEnd() && !isAudio }"
            >
                <textarea
                    v-if="!isAudio"
                    :disabled="isVisitor"
                    :auto-height="true"
                    class="TUI-message-input-area"
                    :adjust-position="false"
                    cursor-spacing="24"
                    v-model="inputText"
                    :show-confirm-bar="false"
                    :disable-default-padding="true"
                    ref="message_input"
                    @focus="inputFocus"
                    @blur="inputBlur"
                    confirm-type="done"
                    confirm-hold="true"
                    @confirm="handleSendTextMessage"
                    @linechange="linechange"
                    maxlength="140"
                    type="text"
                    :placeholder="placeholderText"
                />

                <!-- <view class="stop_box" @touchmove="stopPop" @tap="stopTap"></view> -->

                <!-- <view class="phd" v-if="!inputText">
                    <text class="text">
                        说点什么呢~
                    </text>
                </view> -->
                <AudioMessage v-if="isAudio"></AudioMessage>
            </view>

            <view
                class="TUI-message-input-functions"
                :class="{
                    ios: systemInfo.platform === 'ios',
                    android: systemInfo.platform === 'android',
                    active: inputFocusStatu && inputText.trimEnd() && !isAudio,
                }"
                hover-class="none"
            >
                <image
                    v-if="!isVisitor"
                    class="TUI-icon"
                    @tap="handleEmoji"
                    src="/static/im/emoji.png"
                ></image>
                <view
                    v-if="!isVisitor"
                    class="right_box psr"
                    :class="{
                        ios: systemInfo.platform === 'ios',
                        android: systemInfo.platform === 'android',
                        active: inputFocusStatu && inputText.trimEnd() && !isAudio,
                    }"
                >
                    <image
                        @tap="handleExtensions"
                        class="TUI-icon"
                        :class="{
                            active: inputFocusStatu && inputText.trimEnd() && !isAudio,
                        }"
                        src="/static/im/more.png"
                    ></image>

                    <view
                        class="send_button_box"
                        :class="{
                            active: inputFocusStatu && inputText.trimEnd() && !isAudio,
                        }"
                    >
                        <view
                            class="send_button"
                            :class="{
                                active: inputFocusStatu && inputText.trimEnd() && !isAudio,
                            }"
                            @tap.stop="handleSendTextMessage"
                        >
                            <text class="text">发送</text>
                        </view>
                    </view>
                </view>

                <view class="join_btn" v-if="isVisitor" @tap="goDiscoverDetail">
                    <text class="text">加入群</text>
                </view>
            </view>
        </view>

        <view class="bottom_box">
            <view class="TUI-Emoji-area">
                <Face
				
                    v-if="showFace"
                    :show="displayFlag === 'emoji'"
                    :inputText="inputText"
                    @send="handleSend"
                    @handleDel="handleDel"
                    @handleSendEmoji="handleSendTextMessage"
					ref="refFace"
                ></Face>
            </view>
            <view
                class="TUI-Extensions"
                :class="{ show: displayFlag === 'extension' }"
            >
                <view class="extensions_box">
                    <view
                        class="TUI-Extension-slot mb"
                        @tap="handleSendImageMessage('camera')"
                    >
                        <view class="img_box">
                            <image
                                class="TUI-Extension-icon"
                                src="/static/im/paizhao.png"
                            ></image>
                        </view>
                        <view class="TUI-Extension-slot-name">
                            <text class="text">拍照</text>
                        </view>
                    </view>
                    <view
                        class="TUI-Extension-slot mb"
                        @tap="handleSendImageMessage('album')"
                    >
                        <view class="img_box">
                            <image
                                class="TUI-Extension-icon"
                                src="/static/im/tupian.png"
                            ></image>
                        </view>

                        <view class="TUI-Extension-slot-name">
                            <text class="text">图片</text>
                        </view>
                    </view>
                    <view
                        class="TUI-Extension-slot mb"
                        @tap="handleSendVideoMessage('album')"
                    >
                        <view class="img_box">
                            <image
                                class="TUI-Extension-icon"
                                src="/static/im/shipin.png"
                            ></image>
                        </view>
                        <view class="TUI-Extension-slot-name">
                            <text class="text">视频</text>
                        </view>
                    </view>
                    <view
                        class="TUI-Extension-slot mb"
                        @tap="handleSendVideoMessage('camera')"
                    >
                        <view class="img_box">
                            <image
                                class="TUI-Extension-icon"
                                src="/static/im/luxiang.png"
                            ></image>
                        </view>

                        <view class="TUI-Extension-slot-name">
                            <text class="text">录像</text>
                        </view>
                    </view>
					<view
					    class="TUI-Extension-slot mb"
					    @tap="showMemberSelectPopup"
					>
					    <view class="img_box">
					        <image
					            class="TUI-Extension-icon"
					            src="/static/im/transfer-accounts1.png"
					        ></image>
					    </view>
					
					    <view class="TUI-Extension-slot-name">
					        <text class="text">转账</text>
					    </view>
					</view>
					<view
					    class="TUI-Extension-slot mb"
					    @tap="showRedPopup"
					>
					    <view class="img_box">
					        <image
					            class="TUI-Extension-icon"
					            src="/static/im/red-envelope1.png"
					        ></image>
					    </view>
					
					    <view class="TUI-Extension-slot-name">
					        <text class="text">红包</text>
					    </view>
					</view>
					<view
					    class="TUI-Extension-slot mb"
					    @tap="showFriendSelectPopup"
					>
					    <view class="img_box">
					        <image
					            class="TUI-Extension-icon"
					            src="/static/im/business-card.png"
					        ></image>
					    </view>
					
					    <view class="TUI-Extension-slot-name">
					        <text class="text">名片</text>
					    </view>
					</view>
					<view class="TUI-Extension-slot mb">
					</view>
                    <!-- <view class="TUI-Extension-slot" @tap="handleCalling(1)">
                        <view class="img_box">
                            <image
                                class="TUI-Extension-icon"
                                src="/static/im/yuyin.png"
                            ></image>
                        </view>
                        <view class="TUI-Extension-slot-name">
                            <text class="text">语音通话</text>
                        </view>
                    </view>

                    <view class="TUI-Extension-slot" @tap="handleCalling(2)">
                        <view class="img_box">
                            <image
                                class="TUI-Extension-icon"
                                src="/static/im/shipintonghua.png"
                            ></image>
                        </view>
                        <view class="TUI-Extension-slot-name">
                            <text class="text">视频通话</text>
                        </view>
                    </view>
                    <view
                        class="TUI-Extension-slot"
                    >
                        <view class="img_box">
                            <image
                                class="TUI-Extension-icon"
                                src="/static/im/huodong.png"
                            ></image>
                        </view>
                        <view class="TUI-Extension-slot-name">
                            <text class="text">活动</text>
                        </view>
                    </view>
                 -->
                </view>
                <view
                    :style="{
                        height:
                            Number(systemInfo?.safeAreaInsets?.bottom) + 'px',
                    }"
                >
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts">
import {
    defineComponent,
    ref,
    watch,
    watchEffect,
    reactive,
    toRefs,
    onMounted,
    onUnmounted,
    computed,
    nextTick,
} from "vue";
import Face from "./message/face.vue";
import AudioMessage from "./message/audio.vue";
import { imStore as imStore1 } from "@/store/imStore";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import GraphemeSplitter from "grapheme-splitter";
import { replaceSwear, checkSwear,chooseImage,chooseVideo } from "@/utils/utils";
import { checkBodyData } from "@/hooks/bodyData";
import permision from "@/utils/permission.ts";
import {
    getGroupProfile,
} from "@/hooks/imHooks";
import { userData as userDataStore } from "@/store/userData";


const userData = userDataStore()
const TUIChatInput = defineComponent({
    components: {
        Face,
        AudioMessage,
    },
    props: {
        text: {
            type: String,
            default: () => {
                return "";
            },
        },
        conversationData: {
            type: Object,
            default: () => {
                return "";
            },
        },
        atedList: {
            type: Array,
            default: () => {
                return [];
            },
        },
        keyboardHeight: {
            type: Number,
            default: 0,
        },
        isVisitor: {
            type: Boolean,
            default: false,
        },
    },
    setup(props, ctx: any) {
        const systemInfo: any = systemInfoStore();
        const imStore = imStore1();
        const showFace = ref(false);
        onMounted(() => {
            /* #ifndef H5 */
            // uni.onKeyboardHeightChange(onKeyboardHeightChange);
            /*#endif*/
            uni.$on("areaTap", handleAreaTap);
            uni.$on("letInputFocus", letInputFocus);
            uni.$on("letInputBlur", letInputBlur);
			uni.$on("handleSendExpressionMessage", handleSendExpressionMessage);
            uni.getSystemInfo({
                success(result) {
                    systemInfo.setSystemInfo(result);
                },
            });
            showFace.value = true;
        });

        onUnmounted(() => {
            uni.$off("areaTap", handleAreaTap);
            uni.$off("letInputFocus", letInputFocus);
			uni.$off("handleSendExpressionMessage", handleSendExpressionMessage);
            /* #ifndef H5 */
            // uni.offKeyboardHeightChange(onKeyboardHeightChange)
            /*#endif*/
        });

        const goDiscoverDetail = async() => {
            const { groupID } = imStore.conversation.groupProfile;

            const inGroup = imStore.groupList.some(item=>item.groupID == groupID)
            if(!inGroup){
                uni.showToast({
                    icon: "none",
                    title: "你已不在这个群中",
                    duration: 3000,
                });
                return;
            }

            console.log(res);
            if(res.data.group.joinOption===uni.$TIM.TYPES.JOIN_OPTIONS_DISABLE_APPLY){
                uni.showToast({
                    icon: "none",
                    title: "该群禁止任何人加入",
                    duration: 3000,
                });
                return;
            }

            const pages = getCurrentPages();
            const prevurl = pages[pages.length - 2]?.route;

            if(prevurl==='pages/discover/discoverDetail'){
                uni.navigateBack()
                return;
            }else{
                uni.navigateBack({success(){
                    setTimeout(()=>{
                        uni.navigateTo({
                            url: `/pages/discover/discoverDetail?groupId=${groupID}`,
                        });
                    },200)

                }})
            }


        };

        const goGroupProgramme = async() => {
            uni.$emit('hideKeyboard');
            const { groupID } = imStore.conversation.groupProfile;

            const inGroup = imStore.groupList.some(item=>item.groupID == groupID)


            if(!inGroup){
                uni.showToast({
                    icon: "none",
                    title: "你已不在这个群中",
                    duration: 3000,
                });
                return;
            }
            uni.navigateTo({
                url: `/pages/programme/groupProgramme?groupId=${groupID}`,
            });
        };

        const isGroup = ref(uni.isGroup);

        const isVisitor = computed(() => {
            return props.isVisitor;
        });

        const stopTap = (e: any) => {
            message_input.value.focus();
        };
        //const textarea_box_size = ref({});

        //const textarea_box = ref(null);

        // const getTextareaHeight = async () => {
        //     let pos = null;

        //     await new Promise((callback) => {
        //         setTimeout(()=>{
        //         nextTick(() => {
        //             const dom = weex.requireModule("dom");
        //             dom.getComponentRect(textarea_box.value, (e) => {
        //                 pos = e.size;
        //                 console.log('hhhhhhhhhhhhh')
        //                 console.log('hhhhhhhhhhhhh')
        //                 console.log(uni.upx2px(35.68));
        //                 console.log(systemInfo.windowWidth)
        //                 console.log(e.size.height)
        //                 callback(e);
        //             });
        //         });
        //         },300)
        //     });
        //     if(pos.height===0){
        //         return;
        //     }

        //     if (pos.height !== textarea_box_size.value.height) {
        //         uni.$emit("textareHeightChange", pos.height);
        //     }

        //     textarea_box_size.value = pos;
        // };

        const handleAreaTap = () => {
            data.displayFlag = "";
            inputOpen.value = false;
            uni.$emit("inputOpen", false);
        };

        const TUIServer: any = uni.$TUIKit.TUIChatServer;
        const data: any = reactive({
            firstSendMessage: true,
            inputText: "",
            extensionArea: false,
            sendMessageBtn: false,
            displayFlag: "",
            isAudio: false,
            displayServiceEvaluation: false,
            displayCommonWords: false,
            displayOrderList: false,
            inputBox: null,
			newPosition:false,
            conversation: computed(() => imStore.conversation),
        });

        const placeholderText = ref("说点什么呢~");

        const inputOpen = ref(false);
        const inputFocusStatu = ref(false);
        // const transFormHeight = computed(() => {
        //     if (props.keyboardHeight) {
        //         if (inputOpen.value) {
        //             return 0 - (props.keyboardHeight - uni.upx2px(500));
        //         } else {
        //             return uni.upx2px(500) - props.keyboardHeight;
        //         }
        //     } else {
        //         if (inputOpen.value) {
        //             return 0;
        //         } else {
        //             return uni.upx2px(500) - systemInfo?.safeAreaInsets?.bottom;
        //         }
        //     }
        // });

        const transFormHeight = computed(() => {
            if (props.keyboardHeight) {
                return uni.upx2px(500) - props.keyboardHeight;
            }
            if (inputOpen.value) {
                return 0;
            }
            if (!props.keyboardHeight && !inputOpen.value) {
                return uni.upx2px(500) - systemInfo?.safeAreaInsets?.bottom;
            }
        });

        watchEffect(() => {
            data.inputText = props.text;
            if (props.isVisitor) {
                placeholderText.value = "您是游客，暂无法发言";
            }
        });
        const str = computed(() => {
            return data.inputText;
        });
		
        watch(str, (val, oldVal) => {
            if (
                props.conversationData.type === "GROUP" &&
                oldVal &&
                oldVal.length
            ) {
                if (oldVal[oldVal.length - 1] === " ") {
                    props.atedList.forEach((atObj: any) => {
                        if (val.indexOf(atObj.atStr) === -1) {
                            uni.$emit("delAt", atObj.atStr);
                            nextTick(() => {
                                data.inputText = data.inputText.replace(
                                    atObj.replaceText,
                                    ""
                                );
                            });
                        }
                    });
                }
            }

            if (
                props.conversationData.type === "GROUP" &&
                val &&
                val.length &&
                val.length - oldVal.length === 1
            ) {
                if (val[val.length - 1] === "@") {
                    const prevText = val[val.length - 2];

                    if (!prevText || !prevText.trim()) {
                        // uni.showToast({
                        //     title: "触发@",
                        //     icon: "none",
                        // });
						
                        uni.$emit("openAt");
                    }
                }
            }

            if (val) {
                placeholderText.value = "";
            } else {
                setTimeout(() => {
                    placeholderText.value = "说点什么呢~";
                }, 50);
            }

            ctx.emit("syncText", val);

            // console.log('oldVal')
            // console.log(oldVal)
            // console.log('newVal')
            // console.log(val)
            // for(let i=0;i<val.length;i++){

            //     if(oldVal[i]!==val[i]&&val[i]==='\n'){
            //         if(oldVal){
            //             nextTick(()=>{
            //                 data.inputText = oldVal;
            //                 nextTick(()=>{
            //                     handleSendTextMessage();
            //                 })
            //                 //
            //             })

            //         }else{
            //             nextTick(()=>{
            //                 data.inputText=val.substring(0,val.length-1);
            //             })
            //         }
            //         break;
            //     }
            // }

            // console.log(val.lastIndexOf('\n'));
            // console.log('length')
            // console.log(val.length)

            // if(val.length-oldVal.length===1&&val.length-val.lastIndexOf('\n')===1){
            //     ///data.inputText = val.substring(0,val.length-1)
            //     if(val.trim()){
            //         handleSendTextMessage();
            //     }
            // }

            // if( val.indexOf('\n') != -1 ){ //敲了回车键了
            //     handleSendTextMessage()
            //     // uni.hideKeyboard() //收起软键盘
            //     // data.displayFlag = "";
            //     // uni.$emit("inputOpen", false);
            //     // inputOpen.value = false;
            // }
        });

        const linechange = (event: any) => {
			//console.log("***************高****************")
			//console.log(event.detail.height)
            if (isGroup.value) {
                if (systemInfo.platform === "ios") {
                    uni.$emit(
                        "textareHeightChange",
                        event.detail.height + uni.upx2px(65)
                    );
                } else {
                    uni.$emit(
                        "textareHeightChange",
                        event.detail.height + uni.upx2px(44)
                    );
                }
            } else {
                if (systemInfo.platform === "ios") {
                    uni.$emit(
                        "textareHeightChange",
                        event.detail.height + uni.upx2px(65)
                    );
                } else {
                    uni.$emit(
                        "textareHeightChange",
                        event.detail.height + uni.upx2px(44)
                    );
                }
            }
            // setTimeout(()=>{
            //     uni.$emit("textareHeightChange", event.detail.height+uni.upx2px(65));
            // },100)
            //getTextareaHeight();
        };
        const handleSwitchAudio = () => {
            if (isVisitor.value) {
                return;
            }
            data.isAudio = !data.isAudio;
            if (data.isAudio) {
                data.displayFlag = "";
                uni.$emit("inputOpen", false);
                inputOpen.value = false;
                uni.$emit("hideKeyboard");
            }else{
                setTimeout(()=>{
                    message_input.value.focus();
                },50)
            }

            uni.$emit("inputTaped");
        };

        const letInputFocus = () => {
            // #ifdef APP-NVUE
            message_input.value.focus();
            // #endif
        };
        const letInputBlur = () => {
            // #ifdef APP-NVUE
            if(message_input.value){
                message_input.value.blur();
            }
            // #endif
        };

        // const handelCenterBoxTap = ()=>{
        //     uni.$emit("inputTaped", false);
        // }

        const message_input = ref(null);

        const handleEmoji = () => {
            console.log("inputFocusStatu");
            console.log(inputFocusStatu.value);
            data.isAudio = false;
            if (inputFocusStatu.value) {
                data.displayFlag = "emoji";
            } else {
                data.displayFlag = "emoji";
                // data.displayFlag = data.displayFlag === "emoji" ? "" : "emoji";
                // if(!data.displayFlag){
                //     message_input.focus();
                // }
            }
            if (data.displayFlag) {
                uni.$emit("inputOpen", true);
                inputOpen.value = true;
            } else {
                uni.$emit("inputOpen", false);
                inputOpen.value = false;
            }
            uni.$emit("inputTaped", false);
			refFace.value.onrefresh()
            setTimeout(() => {
                uni.hideKeyboard();
            }, 20);
        };

        const handleDel = () => {
            const str = data.inputText;
            var splitter = new GraphemeSplitter();
            var graphemes = splitter.splitGraphemes(str); //将含有表情的字符串分割成数组
            graphemes.pop(); //删除数组中最后一个元素
            data.inputText = graphemes.join("");
        };

        const handleExtensions = (e: any) => {
            data.isAudio = false;
            if (inputFocusStatu.value) {
                data.displayFlag = "extension";
            } else {
                data.displayFlag = "extension";
                // data.displayFlag = data.displayFlag === "extension" ? "" : "extension";
            }
            //data.displayFlag = data.displayFlag === "extension" ? "" : "extension";
            if (data.displayFlag) {
                uni.$emit("inputOpen", true);
                inputOpen.value = true;
            } else {
                uni.$emit("inputOpen", false);
                inputOpen.value = false;
            }

            uni.$emit("inputTaped", false);

            nextTick(() => {
                setTimeout(() => {
                    uni.hideKeyboard();
                }, 20);
            });
        };

        // 发送消息
        const handleSendTextMessage = () => {
            if (data.inputText.trimEnd()) {
				
                //const str = data.inputText;

                const str = replaceSwear(data.inputText);

                // console.log(898989898989)
                // console.log(898989898989)
                // console.log(898989898989)
                // console.log(898989898989)
                // console.log(str)

                if (!props.atedList.length) {
                    uni.$TUIKit.TUIChatServer.sendTextMessage(
                        JSON.parse(JSON.stringify(str))
                    );
                } else {
                    const atUserList = props.atedList.map((item: any) => {
                        if (item.userID === "所有人") {
                            return uni.$TIM.TYPES.MSG_AT_ALL;
                        }
                        return item.userID;
                    });
					//点击发送按钮
					uni.$emit("onSendButton");
                    uni.$TUIKit.TUIChatServer.sendTextAtMessage({
                        text: JSON.parse(JSON.stringify(str)),
                        atUserList,
                    });

                    uni.$emit("clearAtList");
                }

                // setTimeout(()=>{
                //     uni.$TUIKit.TUIChatServer.sendTextMessage(
                //         JSON.parse(JSON.stringify(str))
                //     );
                // },50)
            }
            data.inputText = "";
        };

        // 处理需要合并的数据
        const handleSend = (emo: any) => {
            data.inputText += emo.name;
            // inputEle.value.focus();
        };
		//发的图片消息
        const handleSendImageMessage = (type: any) => {
			if(systemInfo.platform==='android'){
				imStore.setReset(false)
			}
            chooseImage({
                sourceType: [type],
                count: 1,
                success: (res) => {
                    uni.getImageInfo({
                        src: res.tempFilePaths[0],
                        success(image) {
                            TUIServer.sendImageMessage(res, image);
                        },
                    });
                },
            });
        };
		//发送自定表情
		const handleSendExpressionMessage = (url:string) => {
			let param = {
				data:'expression',
				description:'表情',
				extension:url
			}
			TUIServer.sendCustomMessage(param);
		}
		//发送名片
		const handleSendBusinessCardMessage = (extension:string) => {
			let param = {
				data:'business_card',
				description:'名片',
				extension:extension
			}
			TUIServer.sendCustomMessage(param);
		}
        // const onKeyboardHeightChange = (obj: any) => {
        //     console.log("onKeyboardHeightChange1111");
        //     console.log("onKeyboardHeightChange1111");
        //     console.log("onKeyboardHeightChange1111");
        //     const { height } = obj;
        //     props.keyboardHeight = height;
        // };

        const handleSendVideoMessage = (type: any) => {
			if(systemInfo.platform==='android'){
				imStore.setReset(false)
			}
            chooseVideo({
                sourceType: [type],
                // 来源相册或者拍摄
                maxDuration: 60,
                // 设置最长时间60s
                camera: "back",
                compressed: false,
                // 后置摄像头
                success: (res) => {
                    if (res) {
                        TUIServer.sendVideoMessage(res);
                    }
                },
                fail: (err) => {
                    console.log('fffffffff')
                    console.log('fffffffff')
                    console.log('fffffffff')
                    console.log(err);
                },
            });
        };

        const handleCalling = (value: any) => {
            // todo 目前支持单聊
            if (data.conversation.type === "GROUP") {
                uni.showToast({
                    title: "群聊暂不支持",
                    icon: "none",
                });
                return;
            }
            const { userID } = data.conversation.userProfile;

            // #ifdef APP-PLUS
            if (typeof uni.$TUICallKit === "undefined") {
                console.error(
                    "请集成 TUICallKit 插件，使用真机运行并且自定义基座调试，请参考官网文档：https://cloud.tencent.com/document/product/269/83857"
                );
                uni.showToast({
                    title: "请集成 TUICallKit 插件哦 ～ ",
                    icon: "none",
                    duration: 3000,
                });
            } else {
                uni.$TUICallKit.call(
                    {
                        userID: userID,
                        callMediaType: value,
                    },
                    (res) => {
                        //console.log(JSON.stringify(res));
                    }
                );
            }
            // #endif
            // #ifdef MP-WEIXIN
            if (
                typeof uni.$TUICallKit !== "undefined" &&
                uni.$TUICallKit.value !== null
            ) {
                uni.$TUICallKit.value.call({
                    userID: userID,
                    type: value,
                });
            } else {
                console.error(
                    "请集成 TUICallKit 插件哦～，请参考官网文档：https://cloud.tencent.com/document/product/269/83858"
                );
                uni.showToast({
                    title: "请集成 TUICallKit 插件哦 ～ ",
                    icon: "none",
                    duration: 3000,
                });
            }
            // #endif
            // #ifdef H5
            uni.showToast({
                title: "暂不支持",
                icon: "none",
            });
            // #endif
        };
		
		const goOverview = async() => {
            uni.$emit('hideKeyboard');
		    if(!checkBodyData()){
		        return;
		    }
		
		    if(imStore.conversation.type==="C2C"){
		        return;
		    }
		    const { groupID } = imStore.conversation.groupProfile;

            const inGroup = imStore.groupList.some(item=>item.groupID == groupID)


            if(!inGroup){
                uni.showToast({
                    icon: "none",
                    title: "你已不在这个群中",
                    duration: 3000,
                });
                return;
            }

		    uni.navigateTo({
		        url: `/pages/overview/overview?groupId=${groupID}`,
		    });
		
		
		};
        const goClockin = async() => {
            uni.$emit('hideKeyboard');
            if (!checkBodyData()) {
                return;
            }

            if (imStore.conversation.type === "C2C") {
                return;
            }
            const { groupID } = imStore.conversation.groupProfile;

            const inGroup = imStore.groupList.some(item=>item.groupID == groupID)


            if(!inGroup){
                uni.showToast({
                    icon: "none",
                    title: "你已不在这个群中",
                    duration: 3000,
                });
                return;
            }

            uni.navigateTo({
                url: `/pages/clockin/clockin?groupId=${groupID}`,
            });
        };
        const goRankList = async() => {
            uni.$emit('hideKeyboard');
            if (!checkBodyData()) {
                return;
            }
            if (imStore.conversation.type === "C2C") {
                return;
            }
            const { groupID } = imStore.conversation.groupProfile;

            const inGroup = imStore.groupList.some(item=>item.groupID == groupID)

            if(!inGroup){
                uni.showToast({
                    icon: "none",
                    title: "你已不在这个群中",
                    duration: 3000,
                });
                return;
            }

            uni.navigateTo({
                url: `/pages/rankList/rankList?groupId=${groupID}`,
            });
        };
        const handleClockin = () => {
            if (imStore.conversation.type === "C2C") {
                return;
            }

            const obj = {
                title: "快来早餐打卡吧~",
                type: "早餐",
                progress: "23/28",
            };

            const custom = {
                data: "1",
                description: "用餐打卡提醒",
                extension: JSON.stringify(obj),
            };

            uni.$TUIKit.TUIChatServer.sendCustomMessage(custom);
        };
        const goGroupInvite = () => {
            const groupId = imStore.conversation?.groupProfile?.groupID;
            uni.navigateTo({
                url: `/pages/TUIKit/TUIPages/TUIGroup/groupPages/groupInvite?groupID=${groupId}`,
            });
        };

        const handleMoneyMessage = () => {
            if (data.inputText.trimEnd()) {
                uni.$TUIKit.TUIChatServer.sendTextMessage(
                    JSON.parse(JSON.stringify(data.inputText))
                );
            }
            data.inputText = "";
        };

        const inputFocus = () => {
            //data.displayFlag=''
            //console.log("inputFocus");
            //console.log("inputFocus");
            //console.log("inputFocus");
            uni.$emit("inputFocus", true);
            inputFocusStatu.value = true;
            // if(inputOpen.value){
            //     uni.$emit('inputFocus',true);
            // }else{
            //     uni.$emit('inputFocus',false);
            // }
            //uni.$emit('inputFocus');
            // uni.$emit('inputOpen',false);
            //inputOpen.value= false;
            //uni.$emit('inputTaped')
        };

        const inputBlur = () => {
            //data.displayFlag=''
            console.log("inputBlur");
            console.log("inputBlur");
            console.log("inputBlur");
            inputFocusStatu.value = false;
            // if(inputOpen.value){
            //     uni.$emit('inputFocus',true);
            // }else{
            //     uni.$emit('inputFocus',false);
            // }
            //uni.$emit('inputFocus');
            // uni.$emit('inputOpen',false);
            //inputOpen.value= false;
            //uni.$emit('inputTaped')
        };
		const showRedPopup = () => {
			if(userData.isRealName === 0){
				uni.navigateTo({
				    url: `/pages/userinfo/card`,
					success: () => {
						uni.showToast({
							title:'请先完成实名认证',
							icon:'none',
							duration:1500
						})
					}
				});
			}else{
				ctx.emit("showRedPopup");
			}
		}
		const showFriendSelectPopup = () => {
			ctx.emit("showFriendSelectPopup");
		}
		const showMemberSelectPopup = () => {
			if(userData.isRealName === 0){
				uni.navigateTo({
				    url: `/pages/userinfo/card`,
					success: () => {
						uni.showToast({
							title:'请先完成实名认证',
							icon:'none',
							duration:1500
						})
					}
				});
			}else{
				ctx.emit("showMemberSelectPopup");
			}
		}
		const refFace = ref()
		const deleteExpression = (id:string) => {
			refFace.value.deleteExpression(id)
		}
		const topExpression = (id:string) => {
			refFace.value.topExpression(id)
		}
		const showNewPosition = (isShow:boolean) => {
			data.newPosition = isShow;
		}
		const onhadToBottom = () => {
			ctx.emit("onHandleScrollBottom");
		}
        return {
            ...toRefs(data),
            handleExtensions,
            handleSendImageMessage,
            handleSendTextMessage,
            handleSendVideoMessage,
            handleEmoji,
            handleSend,
            handleSwitchAudio,
            handleCalling,
            handleMoneyMessage,
            systemInfo,
            inputOpen,
            inputFocus,
            inputBlur,
            inputFocusStatu,
            transFormHeight,
            handleDel,
            message_input,
            //textarea_box,
            placeholderText,
            linechange,
            handleClockin,
            goGroupInvite,
            isGroup,
			goOverview,
			goClockin,
            isVisitor,
            goDiscoverDetail,
            goRankList,
            goGroupProgramme,
            showFace,
			showRedPopup,
			showMemberSelectPopup,
			refFace,
			deleteExpression,
			topExpression,
			showFriendSelectPopup,
			handleSendBusinessCardMessage,
			showNewPosition,
			onhadToBottom
        };
    },
});
export default TUIChatInput;
</script>
<style lang="scss" scoped>
.a-center {
    align-items: center;
}

.j-center {
    justify-content: center;
}

.j-between {
    justify-content: space-between;
}
.j-end {
    justify-content: flex-end;
}

.j-around {
    justify-content: space-around;
}

.d-flex {
    display: flex;
}

.d-c {
    flex-direction: column;
}
.d-r {
    flex-direction: row;
}

.j-end {
    justify-content: flex-end;
}

.TUI-message-input-container {
    flex-direction: column;
    width: 750rpx;
    position: fixed;
    bottom: 0;
    //transform: translateY(220rpx);
    transition: transform 0.3s ease;
    /* #ifndef APP-NVUE */
    z-index: 100;
    // overflow: hidden;
    /* #endif */
    background-color: #fff;
    //border-top: 1px solid rgba(0, 0, 0, 0.08);
	
	.new-position{
		z-index: 99999;
		position:absolute;
		right: 40rpx;
		top:-100rpx;
		background-color: #ffffff;
		padding: 10rpx;
		border-radius: 3rpx;
		.new-position-text{
			font-size: 24rpx;
			color: #367EED;
		}
	}
}

.bottom_box {
    position: relative;
    width: 750rpx;
    height: 500rpx;
}

.controls {
    width: 750rpx;
    height: 70rpx;
    background: #fff;
    align-items: flex-end;
    padding: 0 20rpx;

    justify-content: space-around;

    .control {
        min-width: 160rpx;
        height: 60rpx;
        padding: 0 20rpx;
        border-radius: 30rpx;
        background: #f5f5f5;
        &:active {
            background: #ecfff9;
        }
        .icon {
            width: 40rpx;
            height: 40rpx;
            margin-right: 14rpx;
        }
        .text {
            font-size: 24rpx;
            color: #333333;
			font-weight: 400;
			font-family: PingFangSC, PingFang SC;
        }
    }
}

.TUI-message-input {
    display: flex;
    flex-direction: row;

    align-items: flex-end;
    //background-color: #f1f1f1;
    background: #fff;
    width: 750rpx;
    padding: 12rpx 0;
    .center_box {
        position: relative;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 470rpx;
        min-height: 80rpx;
        transition-property: width;
        transition-duration: 0.15s;
        transition-delay: 0.05s;
        transition-timing-function: ease;
        &.active {
            width: 420rpx;
        }
        .stop_box {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: red;
        }
    }
}

.TUI-commom-function {
    display: flex;
    flex-wrap: nowrap;
    width: 750rpx;
    height: 106rpx;
    background-color: #f1f1f1;
    align-items: center;
}

.TUI-commom-function-item {
    display: flex;
    width: 136rpx;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    color: #ffffff;
    height: 48rpx;
    margin-left: 16rpx;
    border-radius: 24rpx;
    background-color: #00c8dc;
}

.TUI-commom-function-item:first-child {
    margin-left: 48rpx;
}

.TUI-message-input-functions {
    display: flex;
    min-width: 160rpx;
    height: 80rpx;
    flex-direction: row;
    align-items: center;
    overflow: auto;
    margin-left: 10rpx;
    &.active {
        //width:210rpx;
    }

    .join_btn {
        width: 140rpx;
        height: 80rpx;
        background-color: #1dc691;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-radius: 10rpx;
        margin-left: 5rpx;
        .text {
            color: #fff;
            font-size: 26rpx;
        }
    }
}

.audio_icon_box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100rpx;
    align-items: center;
    top: -10rpx;
    height: 56rpx;
    .TUI-icon {
        position: absolute;
        top: 0;
        left: 20rpx;
        transform: translateX(-200rpx);
        &.show {
            transform: translateX(0);
        }
    }
}

.TUI-message-input-main {
    background-color: #fff;
    flex: 1;
    height: 70rpx;
    border-radius: 5rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.TUI-message-input-area {
    flex: 1;
    padding: 20rpx 20rpx;
    background: #f5f5f5;
    border-radius: 4px;
    background: #f5f5f5;
    min-height: 80rpx;
    height: 80rpx;
    font-size: 30rpx;
    transition-property: height;
    transition-duration: 0.15s;
    transition-delay: 0.05s;
    transition-timing-function: ease;
}
.right_box {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 120rpx;
    height: 80rpx;
    margin-left: 20rpx;

    &.ios {
        .send_button_box {
            opacity: 0;
            transition-property: opacity;
            transition-duration: 0.15s;
        }
    }

    .send_button_box {
        position: absolute;
        top: 2000px;
        width: 120rpx;
        height: 80rpx;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        &.active {
            top: 0;
            left: 0;
            opacity: 1;
        }
    }
    .send_button {
        background-color: #1dc691;
        width: 120rpx;
        height: 80rpx;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-radius: 10rpx;
        transition-property: transform;
        transform: translateX(40rpx);
        transition-duration: 0.15s;
        transition-timing-function: linear;
        .text {
            color: #fff;
            font-size: 32rpx;
        }
        &.active {
            transform: translateX(0rpx);
        }
        &:active {
            opacity: 0.8;
        }
    }

    &.android.active {
        width: 140rpx;
        justify-content: center;
        .send_button_box {
            opacity: 1;
        }
        .send_button {
            transform: translateX(0);
        }
    }

    &.active {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 56rpx;
        height: 80rpx;
        .send_button_box {
            &.active {
                left: 0;
            }
        }
    }
}

.TUI-icon {
    width: 56rpx;
    height: 56rpx;
    top: 0;
    &.active {
        top: 2000px;
    }
}

.TUI-Extensions {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 750rpx;
    height: 500rpx;
    transform: translateX(750rpx);
    &.show {
        transform: translateX(0);
    }
}

.extensions_box {
    width: 750rpx;
    flex: 1;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 50rpx;
}

.mb {
    //margin-bottom:30rpx;
}

.TUI-Extension-slot {
    width: 187rpx;
    height: 170rpx;
    align-items: center;
    justify-content: center;
}

.img_box {
    width: 110rpx;
    height: 110rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 20rpx;
}
.TUI-Extension-icon {
    width: 50rpx;
    height: 50rpx;
}

.TUI-sendMessage-btn {
    display: flex;
    align-items: center;
    margin: 0 10rpx;
}

.TUI-Emoji-area {
    width: 750rpx;
    height: 500rpx;
}

.TUI-Extension-slot-name {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 60rpx;
    .text {
        font-size: 24rpx;
        color: #333333;
    }
}

.modal-title {
    text-align: center;
    color: #fff;
}
</style>